<template>
<div>
  <div style="font-size: 18px;height: 5%">
    间隔
    <el-slider
        v-model="value2"
        :step="5"
        :min="5"
        :max="20"
        show-stops
        style="display: inline-flex;width: 60% ;margin-right:20% ;float: right"
    >
    </el-slider>
  </div>
  <div style="height: 95%;width: 100%"  >
    <ve-histogram :data="chartData" :extend="chartExtend" height="100%"></ve-histogram>
  </div>
</div>
</template>

<script>
export default {
  name: "DataViewB2",
  data(){
    return{
      value2:5,
      chartData: {
        columns: ['x','y'],
        rows: [],
      },
      chartExtend:{
        title: {
          text:'各分数段人数图',
          textAlign:'center',
          left:'center'
        },
        yAxis:{
          name:'人数',
          position:'left',
          nameTextStyle: {
            fontSize: 18,
          }
        },
        legend:{
          show: false
        }
      }
    }
  },
  methods:{
    getData(){
      this.$axios.post('/getB2Data',{classId:this.classId,stride:this.value2})
          .then(res=>{
            this.chartData.rows=res.data;
          })
    }
  },
  mounted() {
    if(this.classId!=='')
      this.getData();
  },
  watch:{
    classId(){
      this.getData();
    },
    value2(){
      this.getData();
    }
  },
  props:["classId"]
}
</script>

<style scoped>

</style>
